<template>
  <div class="list-item"
       @click="emListItemClick"
       v-show="isCompleted">
    <el-badge :value="getFreeShipping">
      <el-image
        :src="product.image"
        @load="completed"
        @error="completed">
        <el-image
          slot="error"
          src="https://dummyimage.com/140x140/f4df98&text=%20IMAGE" />
      </el-image>
    </el-badge>
    <div class="detail">
      <div class="productName">{{ product.productName }}</div>
      <p class="productPrice">￥{{ getProductPrice }}</p>
      <i class="productSell">已售 {{ product.productSell }}</i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EMListItem',
  props: {
    product: {
      type: Object,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isCompleted: false
    }
  },
  methods: {
    emListItemClick () {
      this.$store.commit('changeCurrentList', { product: this.product })
      this.$router.push({ path: `/LifeListItemDetail/${this.id}` })
    },
    completed () {
      this.isCompleted = true
    }
  },
  computed: {
    getProductPrice () {
      return this.product.productPrice.toFixed(2)
    },
    getFreeShipping () {
      return this.product.isFreeShipping ? '包邮' : ''
    }
  }
}
</script>

<style scoped>
.list-item {
  margin: 0 auto;
  padding: 0.2rem 0;
  text-align: center;
  box-sizing: border-box;
}
.list-item >>> .el-badge__content {
  right: 30px;
}
.list-item .detail .productName {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item .detail .productPrice {
  margin: 0;
  line-height: 1;
  color: #ffb6c1;
  text-align: left;
  font-weight: bold;
}
.list-item .detail .productSell {
  display: block;
  font-size: 0.6rem;
  color: #778899;
  text-align: left;
  font-style: normal;
}
.list-item .detail .detail-icon {
  text-align: left;
}
.list-item .detail .detail-icon div {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  line-height: 1.2rem;
  color: rgb(243, 163, 129);
  font-size: 0.5rem;
  border: 1px solid;
  border-radius: 20%;
  background-color: #fbf0ef;
}
.list-item .detail .detail-icon div:nth-child(n + 2) {
  margin-left: 0.5rem;
}
.productName {
  color: #4682b4;
}
</style>
